import { ReactNode } from "react";
import { View } from "@tarojs/components";
import { cva } from "class-variance-authority";
import { twMerge } from "tailwind-merge";

const clas = cva("flex", {
  variants: {
    align: {
      center: "items-center",
      start: "items-start",
      end: "items-end",
    },
    content: {
      center: "justify-center",
      between: "justify-between",
      around: "justify-around",
      end: "justify-end",
    },
    center: {
      true: "items-center justify-center",
    },
    wrap: {
      true: "flex-wrap",
    },
    direction: {
      col: "flex-col",
    },
  },
});

type ByRowProps = {
  gap?: number;

  children?: ReactNode;
  className?: string;

  wrap?: boolean;
  center?: boolean;
  direction?: "col";
  align?: "start" | "end" | "center";
  content?: "center" | "between" | "around" | "end";

  onClick?: (event) => void;
};

export default ({
  gap = 0,
  wrap,
  center,
  align,
  content,
  direction,
  children,
  className,

  onClick,
}: ByRowProps) => {
  return (
    <View
      className={twMerge(
        clas({ wrap, center, align, content, direction }),
        className
      )}
      onClick={onClick}
    >
      {children}
    </View>
  );
};
